@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  /* override default font size for better look on small screens */
  font-size: 14px;
}

/**
 * Taken from https://dev.to/jochemstoel/re-add-dark-mode-to-any-website-with-just-a-few-lines-of-code-phl
 * TODO: use proper tailwind/css-variables solution
 */

/* This class is useful in cases where you need to revert dark-mode,
so that this content looks like light mode when dark mode is on, and vise versa.
For example, tooltip, that should look different from main content */
.invert-dark-mode {
  filter: invert(100%) hue-rotate(180deg) contrast(100%) !important;
}

html.workaround-dark {
  filter: invert(100%) hue-rotate(180deg) contrast(80%) !important;
  background: #fff;

  & .line-content {
    background-color: #fefefe;
  }

  & .workaround-dark-hidden {
    display: none;
  }

  & .workaround-dark-visible {
    display: block !important;
  }
}

/* --- Radix UI / Tremor Hotfixes --- */
/* Radix backdrop prevents clicks on elements behind it, so we need to override it.
   HeadlessUI portal root, should be above all other elements, as Select dropdowns are rendered there
*/
#headlessui-portal-root {
  pointer-events: auto;
  z-index: 55;
}
.Toastify {
  pointer-events: auto;
}

/* It makes the toast container */
/* not block clicks on elements  */
/* between open toasts */
.Toastify__toast-container {
  @apply pointer-events-none;
}
.Toastify__toast * {
  @apply pointer-events-auto;
}
/* --- End of Radix UI / Tremor Hotfixes */

.rules-tooltip [role="tooltip"] {
  @apply w-72; /* This sets the width to 16rem. Adjust the number as needed. */
  @apply break-words; /* This will wrap long words if needed. */
}

/* styles/globals.css */
.loader {
  border: 4px solid #f3f3f3; /* Light grey */
  border-top: 4px solid #838885; /* Green */
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 2s linear infinite;
}

.page-container {
  @apply p-4 pl-1 mx-auto w-full;
  @screen xl {
    @apply p-6 pl-1;
  }
}

.card-container {
  @apply p-4 mx-auto;
  @screen xl {
    @apply p-10;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes scroll-shadow-left {
  0% {
    filter: none;
  }
  25%,
  100% {
    filter: drop-shadow(rgba(0, 0, 0, 0.07) -2px 9px 5px);
  }
}

@keyframes scroll-shadow-right {
  0%,
  75% {
    filter: drop-shadow(rgba(0, 0, 0, 0.07) 2px 9px 5px);
  }
  99% {
    filter: none;
  }
}

.pagination-button {
  @apply shadow-tremor-input border-tremor-border bg-tremor-background;

  &:not(:first-child) {
    @apply -ml-px;
  }

  &:first-child:not(:last-child) {
    @apply rounded-r-none;
  }

  &:last-child:not(:first-child) {
    @apply rounded-l-none;
  }

  &:not(:first-child):not(:last-child) {
    @apply rounded-l-none rounded-r-none;
  }

  &:not(:disabled):hover {
    @apply bg-slate-100;
  }
}

.tremor-TableRow-row > td.bg-tremor-background {
  background-color: inherit !important;
}
